<template>
    <!-- 卡片视图区 -->
    <el-card class="box-card">


        <template #header>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-button-group>
                        <el-button @click="urlEncode" type="primary"> URL编解 </el-button>
                        <el-button @click="urlDecode" type="primary"> URL解码 </el-button>
                    </el-button-group>
                </el-col>
            </el-row>
        </template>

        <div id="container-main">
            <div>
                <el-input v-model="urlString" :rows="4" type="textarea" placeholder="请输入url" />
            </div>
            <div>
                <el-divider>
                    <el-icon><star-filled /></el-icon>
                </el-divider>
            </div>
            <div>
                <el-input v-model="urlStringResult" :rows="4" type="textarea" placeholder="编解码结果" />
            </div>
        </div>

    </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Edit } from '@element-plus/icons-vue'

// ----数据定义区域 START----
let urlString = ref('')
let urlStringResult = ref('')

// ----数据定义区域 END----

// ----方法定义区域 START----

const urlEncode = () => {
    urlStringResult.value = encodeURIComponent(urlString.value)
}

const urlDecode = () => {
    urlStringResult.value = decodeURIComponent(urlString.value)
}

// ----方法定义区域 END----




</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit {
    display: inline;
}

#container-main {
    height: 500px;
}
</style>